<!-- <!-- <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交通信号灯模拟器</title>
    <script type="importmap">
    {
        "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            padding: 20px;
        }
        
        .container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 500px;
            width: 100%;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .traffic-light-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 30px 0;
        }
        
        .traffic-light {
            width: 200px;
            height: 400px;
            background-color: #2c3e50;
            border-radius: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding: 25px 0;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        .traffic-light::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 200px;
            background-color: #2c3e50;
            top: -190px;
            border-radius: 10px 10px 0 0;
        }
        
        .light {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #34495e;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.5s ease;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
        }
        
        .light.active {
            box-shadow: 0 0 30px 10px currentColor;
        }
        
        .red.active {
            background-color: #e74c3c;
        }
        
        .yellow.active {
            background-color: #f1c40f;
        }
        
        .green.active {
            background-color: #2ecc71;
        }
        
        .status {
            margin-top: 20px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #2c3e50;
            padding: 10px 20px;
            background-color: #ecf0f1;
            border-radius: 10px;
            display: inline-block;
        }
        
        .instructions {
            background-color: #ecf0f1;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            text-align: left;
        }
        
        .instructions h2 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .instructions p {
            margin-bottom: 10px;
            color: #34495e;
            line-height: 1.5;
        }
        
        .countdown {
            font-size: 1.2rem;
            color: #e74c3c;
            margin-top: 10px;
            font-weight: bold;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .traffic-light {
                width: 150px;
                height: 300px;
            }
            
            .light {
                width: 80px;
                height: 80px;
                font-size: 1rem;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>交通信号灯模拟器</h1>
            
            <div class="traffic-light-container">
                <div class="traffic-light">
                    <div class="light red" :class="{ active: currentColor === 'red' }">红</div>
                    <div class="light yellow" :class="{ active: currentColor === 'yellow' }">黄</div>
                    <div class="light green" :class="{ active: currentColor === 'green' }">绿</div>
                </div>
                
                <div class="status">
                    当前信号: {{ currentColorText }}
                </div>
                
                <div class="countdown">
                    下次切换: {{ countdown }}秒
                </div>
            </div>
            
            <div class="instructions">
                <h2>使用说明</h2>
                <p>• 信号灯将按照红→黄→绿的顺序自动切换</p>
                <p>• 每种颜色持续2秒钟</p>
                <p>• 10秒后应用程序将自动卸载</p>
                <p>• 您可以通过控制台查看状态变化</p>
            </div>
        </div>
    </div>

    <script type="module">
        import { createApp, ref, onMounted, onBeforeUnmount } from "vue"
        
        const app = createApp({
            setup() {
                const colorList = ['red', 'yellow', 'green']
                const colorTextMap = {
                    'red': '红色 - 停止',
                    'yellow': '黄色 - 准备',
                    'green': '绿色 - 通行'
                }
                
                const currentColor = ref('green')
                const currentColorText = ref(colorTextMap['green'])
                const countdown = ref(2)
                let timer = null
                let countdownTimer = null
                let i = 2 // 从绿色开始
                
                onMounted(() => {
                    console.log('==== 信号灯模拟器已启动 ====')
                    
                    // 信号灯切换定时器
                    timer = setInterval(() => {
                        i = (i + 1) % colorList.length
                        currentColor.value = colorList[i]
                        currentColorText.value = colorTextMap[currentColor.value]
                        countdown.value = 2
                        console.log(`信号灯切换为: ${currentColorText.value}`)
                    }, 2000)
                    
                    // 倒计时定时器
                    countdownTimer = setInterval(() => {
                        countdown.value--
                        if (countdown.value <= 0) {
                            countdown.value = 2
                        }
                    }, 1000)
                })
                
                onBeforeUnmount(() => {
                    console.log('==== 应用程序即将卸载 ====')
                    clearInterval(timer)
                    clearInterval(countdownTimer)
                })
                
                return {
                    currentColor,
                    currentColorText,
                    countdown
                }
            }
        })
        
        app.mount("#app")
        
        // 10秒后卸载应用
        setTimeout(() => {
            app.unmount()
            console.log('==== 应用程序已卸载 ====')
            document.getElementById('app').innerHTML = `
                <div class="container">
                    <h1>应用程序已结束</h1>
                    <p>交通信号灯模拟器运行已完成，页面已卸载。</p>
                    <button onclick="location.reload()" style="padding: 10px 20px; margin-top: 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">重新启动</button>
                </div>
            `
        }, 10000)
    </script>
</body>

</html> -->

 -->

<!-- <!DOCTYPE html>
<html>

<head>
    <title>综合应用案例</title>
    <!-- 使用导入映射表(Import Maps)来告诉浏览器如何定位到导入的 vue -->
    <script type="importmap">
    {    
        "imports":{
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
    </script>
</head>

<body>
    <div id="app">
        <h1>加强版的信号灯</h1>
        <div id="t1" ref="tl">green</div>
    </div>
    <script type="module">
        import { createApp, ref, onMounted, onBeforeUnmount, onUnmounted } from "vue"
        
        const app = createApp({
            setup() {
                const tl = ref()  // 信号灯元素的引用
                const colorList = ['red', 'yellow', 'green']  // 红、黄、绿三种颜色
                let timer = null
                let i = 0;
                
                onMounted(() => {
                    timer = setInterval(() => {
                        console.log(`当前颜色: ${colorList[i]}`);
                        tl.value.style.backgroundColor = colorList[i];
                        tl.value.innerText = colorList[i];
                        i++;
                        if(i === colorList.length) {
                            i = 0;
                        }
                    }, 2000);
                });
                
                onBeforeUnmount(() => {
                    console.log('==== 组件销毁前 ====');
                    clearInterval(timer);
                });
                
                onUnmounted(() => {
                    console.log('===== 组件已销毁 =====');
                });
                
                return { tl };
            }
        });
        
        app.mount("#app");
        
        // 10 秒后执行卸载
        setTimeout(() => {
            app.unmount();
        }, 10000);
    </script>
    <style>
        /* 使#t1 呈现为圆形、白色文字、绿色背景的信号灯 */
        #t1 {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: red;
            line-height: 100px;
            text-align: center;
            color: white;
        }
    </style>
</body>

</html> -->